<template>
  <div
      class="name"
      :class="[matchClass]"
      :style="{ background: rowData.colorPair.light }"
  >
    <div class="colorBar" :style="{ background: rowData.colorPair.dark }"/>
<!--    <div class="type">{{ rowData.type }}</div>-->
    <div class="carId">{{ rowData.name }}{{ rowData.id }}</div>
    <div class="speed">{{ rowData.speed }}</div>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue';

interface RowData {
  gtArray: Array<{ id: string }>;
  colorPair: { light: string; dark: string };
  type: string;
  name: string;
  id: string;
  speed: number;
}


const props = defineProps({
  rowData: {
    type: Object as () => RowData,
    required: true,
  },
})

// const store = useStore();
// const filterBlockId = computed(() => store.state.filterBlockId);

const matchClass = computed(() => {
  const rowData = props.rowData;
  let filterClass = '';
  if (rowData.gtArray.length) {
    // if (rowData.gtArray.some(blockItem => blockItem.id.includes(filterBlockId.value))) {
    //   filterClass = 'match-item';
    // } else {
    filterClass = 'mismatch-item';
    // }
  }
  return filterClass;
});

</script>

<style scoped>
.name {
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 0 5px 0 0;
  border-radius: 8px 0 0 8px;
  align-items: center;
}

.match-item {
  color: #ffffff;
  opacity: 0.7;
  animation: colorful 1s linear alternate infinite;
}

.colorBar {
  width: 10px;
  height: 100%;
}

.carId {
  flex: 1;
}

.type {
  padding: 0 5px 0 0;
  font-size: 1.2rem;
}
</style>
